<template>
  <a-space v-if="source === 'table'">
    <a-tag
      v-for="(item, idx) in Gender"
      v-show="item.name === name"
      :key="idx"
      :color="item.color"
    >
      {{ item.desc }}
    </a-tag>
  </a-space>
</template>

<script lang="ts" setup>
  defineProps({
    source: {
      type: String,
      default() {
        return 'table';
      },
    },
    name: {
      type: String,
      default() {
        return 'table';
      },
    },
  });

  const Gender = [
    {
      code: 0,
      name: 'FEMALE',
      desc: '女',
      color: 'pinkpurple',
    },
    {
      code: 1,
      name: 'MALE',
      desc: '男',
      color: 'gold',
    },
    {
      code: 9,
      name: 'UNDEFINED',
      desc: '未定义',
      color: 'red',
    },
  ];
</script>

<style scoped lang="less">
  .container-breadcrumb {
    margin: 16px 0;
    :deep(.arco-breadcrumb-item) {
      color: rgb(var(--gray-6));
      &:last-child {
        color: rgb(var(--gray-8));
      }
    }
  }
</style>
